<template>
  <div class="main-container" :style="{ padding: showLeftTree ? '0 8px 0px 0px' : '0' }">
    <!-- <MainFixed :title="fixedTitle" v-if="showLeftTree">
      <div slot="list">
        <elTree
          :data="elTree.data"
          :props="elTree.props"
          :node-key="elTree.nodeKey"
          ref="leftListTree"
          :default-checked-keys="[0]"
          :default-expand-all="false"
          @node-click="elTree.NodeClick"
        >
		<span class="custom-tree-node" slot-scope="{ node, data }">
		        <i class="icon-liucheng"></i>
		        <span>{{ data.F_ItemName}}</span>
		 </span>
        </elTree>
      </div>
    </MainFixed> -->
    <ul class="mi-process-task-left">
      <li v-for="(item, index) in treeData" :class="{ active: treeIndex === index }"
        @click="treeNodeHandle(item, index)" :key="item.id">{{ item.F_ItemName }}</li>
    </ul>
    <div class="main-content">
      <el-input v-model.trim="search.Keyword" @keyup.enter.native="searchHandle" style="width: 180px"
        placeholder="流程关键字">
      </el-input>
      <div class="list-content">
        <div v-show="personFlag" class="title">人事管理</div>
        <ul v-show="personFlag" class="person common-list">
          <li v-for="item in personList" :key="item.idF_Id" @click="iconLaunch(item)">
            <img :src="item | filterPersonImage" alt="">
            <div class="text-content">
              <div class="process-name text-overflow" :title="item.F_Name">{{ item.F_Name }}</div>
              <div class="manager-name text-overflow" :title="item.F_Category">{{ item.F_Category }}</div>
            </div>
          </li>
        </ul>
        <div v-show="xingFlag" class="title">运营中心</div>
        <ul v-show="xingFlag" class="xing common-list">
          <li v-for="item in xingList" :key="item.idF_Id" @click="iconLaunch(item)">
            <img :src="item | filterXingImage" alt="">
            <div class="text-content">
              <div class="process-name text-overflow" :title="item.F_Name">{{ item.F_Name }}</div>
              <div class="manager-name text-overflow" :title="item.F_Category">{{ item.F_Category }}</div>
            </div>
          </li>
        </ul>
        <div v-show="contractFlag" class="title">采购管理</div>
        <ul v-show="contractFlag" class="contract common-list">
          <li v-for="item in contractList" :key="item.idF_Id" @click="iconLaunch(item)">
            <img :src="item | filterContractImage" alt="">
            <div class="text-content">
              <div class="process-name text-overflow" :title="item.F_Name">{{ item.F_Name }}</div>
              <div class="manager-name text-overflow" :title="item.F_Category">{{ item.F_Category }}</div>
            </div>
          </li>
        </ul>
        <div v-show="financeFlag" class="title">财务管理</div>
        <ul v-show="financeFlag" class="finance common-list">
          <li v-for="item in financeList" :key="item.idF_Id" @click="iconLaunch(item)">
            <img :src="item | filterFinanceImage" alt="">
            <div class="text-content">
              <div class="process-name text-overflow" :title="item.F_Name">{{ item.F_Name }}</div>
              <div class="manager-name text-overflow" :title="item.F_Category">{{ item.F_Category }}</div>
            </div>
          </li>
        </ul>
        <div v-show="studyFlag&&studyList.length>0" class="title">研究院</div>
         <ul v-show="studyFlag" class="finance common-list">
          <li v-for="item in studyList" :key="item.idF_Id" @click="iconLaunch(item)">
            <img :src="item | filterFinanceImage" alt="">
            <div class="text-content">
              <div class="process-name text-overflow" :title="item.F_Name">{{ item.F_Name }}</div>
              <div class="manager-name text-overflow" :title="item.F_Category">{{ item.F_Category }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- <main-content
      :title="contentTitle"
      :paddingLeft="showLeftTree ? 205 : 0"
      :padding-top="94">
      
      <div slot="search" v-if="showSearch">
        <p class="head_title">{{$t('workFlow.launchList.headTitle')}}</p>
        <div class="wf-search-box">
          <el-input
            v-model="search.Keyword"
            size="small"
            :placeholder="$t('workFlow.launchList.placeholderQueryFlow')"
            @keyup.enter.native="searchList"
            style="width: 200px; margin-right:10px;"
          ></el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="searchList"
            >{{$t('searchModule.searchBtn')}}</el-button
          >
          <el-button
            icon="el-icon-circle-close"
            size="small"
            @click="searchReset"
            >{{$t('searchModule.searchReset')}}</el-button
          >
        </div>
      </div>
      <div
        slot="table"
        alt="在此处放置表格内容"
        style="height:calc(100% - 40px);overflow: overlay;"
        class="flow_box"
      >
        <avue-empty :desc="$t('deletePrompt.noData')" v-if="listParams.Listdata.length === 0"></avue-empty>
        <div v-else class="launch-box">
          <div class="launch-list">
            <List :listParams.sync="listParams" @changLaunch="changLaunch">
            </List>
          </div>
          <div class="page page-fixed el-pagination is-background">
            <el-pagination
              :background="page.background"
              @current-change="handleCurrentChange"
              :current-page.sync="page.currentPage"
              :page-size="page.pageSize"
              :layout="page.layout"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </main-content>
    <slot></slot> -->
  </div>
</template>
<script>
import MainFixed from "@/page/main/MainFixed";
import MainContent from "@/page/main/MainContent";
import List from "./List";
// 接口
import { getWorkflowSchemeInfo } from "@/api/workFlow/WFLaunch";
export default {
  name: "SelectFlow",
  props: {
    showLeftTree: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    isSingle: {
      type: Boolean,
      default: false
    },
    selectList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    nwfSchemeInfoIdList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    nwfRelationId: {
      type: String,
      default: () => {
        return "";
      }
    }
  },
  components: { MainContent, MainFixed, List },
  filters: {
    // 人事管理
    filterPersonImage(row) {
      if (row.F_Name == '排班申请') {
        return require('@/assets/imgs/wgspaiban.png')
      } else if (row.F_Name == '补卡申请') {
        return require('@/assets/imgs/wgsbuka.png')
      } else if (row.F_Name == '出差') {
        return require('@/assets/imgs/wgschuchai.png')
      } else if (row.F_Name == '换班申请') {
        return require('@/assets/imgs/wgshuanban.png')
      } else if (row.F_Name == '外派申请') {
        return require('@/assets/imgs/wgswaipai.png')
      } else if (row.F_Name == '请假') {
        return require('@/assets/imgs/wgsqingjia.png')
      } else if (row.F_Name == '加班') {
        return require('@/assets/imgs/wgsjiaban.png')
      } else if (row.F_Name == '外出') {
        return require('@/assets/imgs/wgswaichu.png')
      } else if (row.F_Name == '运营费用报销(汽油保险修理养护会议培训)') {
        return require('@/assets/imgs/yyfybxqc.png')
      } else if (row.F_Name == '项目变更申请') {
        return require('@/assets/imgs/wgs_xbgsq.png')
      } else {
        return require('@/assets/imgs/zanwu.png')
      }
    },
    // 行政管理
    filterXingImage(row) {
      if (row.F_Name == '项目变更申请') {
        return require('@/assets/imgs/wgs_xbgsq.png')
      } else if (row.F_Name == '名片印制申请') {
        return require('@/assets/imgs/printCard.png')
      } else if (row.F_Name == '招待会议需求单') {
        return require('@/assets/imgs/wgs_zdhyxqd.png')
      } else if (row.F_Name == '事项报批') {
        return require('@/assets/imgs/wgs_sxbp.png')
      } else if (row.F_Name == '酒水领用申请') {
        return require('@/assets/imgs/wgsjiushuilingyong.png')
      } else if (row.F_Name == '啤酒明细单') {
        return require('@/assets/imgs/wgspijiu.png')
      } else if (row.F_Name == '加班') {
        return require('@/assets/imgs/wgsjiaban.png')
      } else if (row.F_Name == '外出') {
        return require('@/assets/imgs/wgswaichu.png')
      } else if (row.F_Name == '运营费用报销（汽油保险修理养护会议培训）') {
        return require('@/assets/imgs/yyfybxqc.png')
      } else if (row.F_Name == '白酒水明细单') {
        return require('@/assets/imgs/wgsbaijiu.png')
      } else if (row.F_Name == '红酒水明细单') {
        return require('@/assets/imgs/wgshongjiu.png')
      } else if (row.F_Name == '通用审批') {
        return require('@/assets/imgs/tongyongshenpi.png')
      } else if (row.F_Name == '物品领用') {
        return require('@/assets/imgs/wgswply.png')
      } else if (row.F_Name == '物品清单') {
        return require('@/assets/imgs/wgswpqd.png')
      } else if (row.F_Name == '图书单') {
        return require('@/assets/imgs/tushudan.png')
      } else if (row.F_Name == '图书借阅') {
        return require('@/assets/imgs/tushujieyue.png')
      } else if (row.F_Name == '发文审批单') {
        return require('@/assets/imgs/wgs_fwspd.png')
      } else if (row.F_Name == '车辆使用申请单') {
        return require('@/assets/imgs/wgs_clsyqd.png')
      } else if (row.F_Name == '证照管理') {
        return require('@/assets/imgs/wgs_zzgl.png')
      } else if (row.F_Name == '发文审批单') {
        return require('@/assets/imgs/wgs_fwspd.png')
      } else if (row.F_Name == '立项申请') {
        return require('@/assets/imgs/wgs_fwspd.png')
      } else if (row.F_Name == '运营采购申请单') {
        return require('@/assets/imgs/yunyincaigousqd.png')
      } else if (row.F_Name == '图书购买需求单') {
        return require('@/assets/imgs/tushugoumaixqd.png')
      } else if (row.F_Name == '用印申请') {
        return require('@/assets/imgs/wgsyongyin.png')
      } else {
        return require('@/assets/imgs/zanwu.png')
      }
    },
    // 合同管理
    filterContractImage(row) {
      if (row.F_Name == '设备合同审批') {
        return require('@/assets/imgs/shebeihetongsp.png')
      } else if (row.F_Name == '日常办公合同审批') {
        return require('@/assets/imgs/richangbanghtsp.png')
      } else if (row.F_Name == '设备供应商名录') {
        return require('@/assets/imgs/wgs_sbgysl.png')
      } else if (row.F_Name == '定标审批') {
        return require('@/assets/imgs/dingbiaoshenpi.png')
      } else if (row.F_Name == '项目采购清单') {
        return require('@/assets/imgs/wgs_xmcgqd.png')
      } else if (row.F_Name == '耗材供应商名录') {
        return require('@/assets/imgs/wgs_hcgysml.png')
      } else if (row.F_Name == '招标审批') {
        return require('@/assets/imgs/zhaobiaoshenpi.png')
      } else if (row.F_Name == '技术方案协议等文件审批单') {
        return require('@/assets/imgs/techlog.png')
      } else if (row.F_Name == '指定采购审批表') {
        return require('@/assets/imgs/zhidingcgspb.png')
      } else if (row.F_Name == '采购需求清单') {
        return require('@/assets/imgs/wgs_cgxqqd.png')
      } else if (row.F_Name == '合同审批') {
        return require('@/assets/imgs/wgshetong.png')
      } else if (row.F_Name == '耗材合同审批') {
        return require('@/assets/imgs/haocaihetongsp.png')
      } else {
        return require('@/assets/imgs/zanwu.png')
      }
    },
    // 综合财务
    filterFinanceImage(row) {
      if (row.F_Name == '付款申请') {
        return require('@/assets/imgs/fukuanshenqing.png')
      } else if (row.F_Name == '运营收票管理') {
        return require('@/assets/imgs/yyspgl.png')
      } else if (row.F_Name == '收票管理') {
        return require('@/assets/imgs/caigouspgl.png')
      } else if (row.F_Name == '备用金申请') {
        return require('@/assets/imgs/beiyongjinshenqing.png')
      } else if (row.F_Name == '预算审批') {
        return require('@/assets/imgs/yusuanshenpi.png')
      } else if (row.F_Name == '差旅以及招待报销') {
        return require('@/assets/imgs/cljzdbx.png')
      } else if (row.F_Name == '日常报销') {
        return require('@/assets/imgs/wgsdaliy.png')
      } else if (row.F_Name == '项目资料') {
        return require('@/assets/imgs/programmerData.png')
      } else if (row.F_Name == '运营费用报销（汽油保险修理养护会议培训）') {
        return require('@/assets/imgs/yyfybxqc.png')
      } else {
        return require('@/assets/imgs/zanwu.png')
      }
    }
  },
  data() {
    var _this = this;
    return {
      search: {
        Limit: 1,
        Size: 500,
        Keyword: "",
      },
      personList: [], // 人事列表
      personFlag: false,
      personId: '',
      xingList: [], // 行政列表
      xingFlag: false,
      xingId: '',
      contractList: [], // 合同列表
      contractFlag: false,
      contractId: '',
      financeList: [], // 财务列表
      financeFlag: false,
      financeId: '',
      studyList:[],//研究院
      studyFlag: true,
      studyId:"",

      treeIndex: 0, // active index
      treeRow: {}, // row
      treeData: [],

      /**
       * 旧页面参数
       * */
      // fixedTitle: this.$t('workFlow.launchList.fixedTitle'),
      // contentTitle: "模板列表",
      // listParams: {
      //   Listdata: [],
      //   checkedIds: [],
      //   checkedList: [],
      //   isSingle: this.isSingle
      // },
      // page: {
      //   currentPage: 1,
      //   total: 0,
      //   layout: "total, prev, pager, next, jumper",
      //   background: false,
      //   pageSize: 30
      // },
      // elTree: {
      //   data: [],
      //   nodeKey: "F_ItemDetailId",
      //   defaultCheckedIndex: 0,
      //   props: {
      //     label: "F_ItemName",
      //     children: null,
      //     disabled: null,
      //     isLeaf: null
      //   },
      //   showLeftTree: this.showLeftTree,
      //   NodeClick: function (data, element, component) {
      //     _this.contentTitle = data.contentTitle || data.label;
      //     _this.search.Keyword = null;
      //     _this.search.Category = data.id;

      //     _this.searchList();
      //   }
      // }
      // end
    };
  },
  async created() {
    let resData = await this.$store.dispatch("updatewWorkFlowCategory");
    this.treeData = resData.filter((item)=>{
        return item.F_ItemValue=="yjy"
    });
    this.treeData.unshift({ F_ItemName: '全部分类', id: '' })
    await this.getAllList()
    // 旧方法
    // this.elTree.data = resData; // 赋值渲染
    // this.searchList();
    // end
  },
  mounted() {
    // setTimeout(()=>{
    //     console.log(getStore({name:"userInfo"}));
    // },5000)
    // 旧方法
    // this.listParams.checkedIds = this.selectList.map(ele => {
    //   return ele.F_Id;
    // });
    // this.listParams.checkedList = this.selectList;
    // let computedHeight = 0;
    // end
  },
  watch: {
    treeData(val){
      if(val.length > 0){
        val.forEach((ele, index, arr) => {
          if(ele.id == '' && index !== 0) {
            arr.splice(ele, 1)
          }
        })
      }
    }
  },
  methods: {
    // 获取全部数据
    getAllList() {
      // this.personFlag = true
      // this.xingFlag = true
      // this.contractFlag = true
      // this.financeFlag = true
      this.studyFlag = true
      this.treeData.forEach(ele => {
        if(ele.F_ItemName == '研究院') {
           this.studyId = ele.id;
        }
      });
      if (this.studyId) {
        // 行政管理
        let xingParams = {
          Limit: this.search.Limit,
          Size: this.search.Size,
          Keyword: this.search.Keyword,
          Category: this.studyId
        }
        getWorkflowSchemeInfo(xingParams).then(res => {
          if (res.data.success) {
            this.studyList = res.data.data.Rows
          }
        })
      }
  
    },
    // 点击左侧分类
    treeNodeHandle(item, index) {
      this.treeIndex = index
      this.treeRow = item
      this.toggleDom(item.F_ItemName)
    },
    // dom 切换显示
    toggleDom(name) {
      if (name == '全部分类') {
        this.personFlag = false
        this.xingFlag = false
        this.contractFlag = false
        this.financeFlag = false
        this.studyFlag=true;
        this.getAllList()
      } if (name == '研究院'){ 
          this.personFlag = false
          this.xingFlag = false
          this.contractFlag = false
          this.financeFlag = false
          this.studyFlag=true;
      }  
    },
    // 搜索事件
    searchHandle() {
      if (this.treeIndex == 0 && this.search.Keyword == '') {
        this.getAllList()
      } else if (this.treeIndex == 0 && this.search.Keyword !== '') {
        let personParams = {
          Limit: this.search.Limit,
          Size: this.search.Size,
          Keyword: this.search.Keyword
        }
        getWorkflowSchemeInfo(personParams).then(res => {
          if (res.data.success) {
            let resData = res.data.data.Rows
            if (resData.length > 0) {
                this.toggleDom(resData[0].F_Category);
                this.studyList = resData.filter((item)=>{
                  return item.F_Category == "研究院"
                });
            }else{
                 this.studyList=[];
            }
          }
        });
      } else if (this.treeRow.F_ItemName == '研究院') {
        this.searchFn(this.studyId)
      }
    },
    // 搜索数据
    searchFn(id) {
      let params = {
        Limit: this.search.Limit,
        Size: this.search.Size,
        Keyword: this.search.Keyword,
        Category: id
      }
      getWorkflowSchemeInfo(params).then(res => {
        if (res.data.success) {
          if (this.treeRow.F_ItemName == '研究院') {
              this.studyList = res.data.data.Rows.filter((item)=>{
                  return item.F_Category == "研究院"
              });
          }
        }
      })
    },
    // 点击图标弹出流程
    iconLaunch(selectItem) {
      if (this.isSingle) {
        // this.listParams.checkedIds = [selectItem.F_Id];
        // this.listParams.checkedList = [{ ...selectItem }];
        this.$emit("launchProcess", selectItem);
      }
    },
    /**
     * 旧方法 start
     */
    // searchList() {
    //   this.search.Limit = this.page.currentPage;
    //   this.search.Size = this.page.pageSize;
    //   this.search.mark = 1;
    //   if (this.nwfSchemeInfoIdList.length > 0) {
    //     this.search.nwfSchemeInfoId = this.nwfSchemeInfoIdList.join(",");
    //   }
    //   if (this.nwfRelationId) {
    //     this.search.nwfRelationId = this.nwfRelationId;
    //   }
    //   getWorkflowSchemeInfo(this.search).then(res => {
    //     if (res.data.success) {
    //       this.listParams.Listdata = res.data.data.Rows;
    //       // console.log(this.listParams.Listdata, '表格数据');
    //       this.page.total = res.data.data.Total;
    //     } else {
    //       this.listParams.Listdata = [];
    //       this.page.total = 0;
    //     }
    //   });
    // },
    // handleCurrentChange(val) {
    //   this.page.currentPage = val;
    //   this.searchList();
    // },
    // searchReset() {
    //   this.search.Keyword = null;
    // },
    // changLaunch(selectItem) {
    //   if (this.isSingle) {
    //     this.listParams.checkedIds = [selectItem.F_Id];
    //     this.listParams.checkedList = [{ ...selectItem }];
    //     this.$emit("launchProcess", selectItem);
    //   }
    // },
    // getCheckedList() {
    //   return this.listParams.checkedList;
    // }
    // end
  }
};
</script>
<style scoped>
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-container {
  display: flex;
}

div /deep/ .launch-box {
  height: 100%;
}

div /deep/ .page {
  position: fixed;
  bottom: 20px;
  right: 30px;
}

div /deep/ .launch-list {
  display: flex;
  flex-direction: column;
  height: 9%;
}

div /deep/ .main-fixed {
  margin: 0px 5px 0px 5px;
}

div /deep/ .main-table {
  min-height: 300px;
  height: calc(100% - 50px);
  overflow: hidden;
}

div /deep/ .main-table-content {
  padding-bottom: 0px;
  overflow: hidden;
}

@media screen and (max-width: 1370px) {
  .launch-list {
    height: 90%;
  }
}

div /deep/ .main-search {
  border-top: none;
}

.search-item>div {
  width: 100%;
}

.head_title {
  font-size: 12px;
  font-weight: bold;
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
  margin-top: -10px;
  line-height: 40px;
  color: #4d4d4d;
}

.process_title .main-content .head_title {
  display: none;
}

.wf-search-box {
  height: 33px;
  margin: 6px 0px;
  text-indent: 5px;
  border-bottom: 1px solid #f2f2f2;
}

div /deep/ .custom-tree-node span {
  font-size: 14px;
  padding-left: 10px;
}

div /deep/ .custom-tree-node i {
  font-size: 12px !important;
}

.mi-process-task-left {
  width: 130px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0px 10px 8px 0px rgb(92 92 92 / 8%);
  background-color: #fff;
}

.mi-process-task-left div:first-child {
  font-weight: 600;
  text-align: center;
}

.mi-process-task-left li {
  width: 100%;
  text-align: center;
  height: 32px;
  line-height: 32px;
  margin: 8px auto;
  border-radius: 4px;
  color: #666666;
}

.mi-process-task-left li.active {
  background-color: #EDEEF1;
}

.mi-process-task-left li:hover {
  background-color: #EDEEF1;
  cursor: pointer;
}

.main-content {
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  padding: 24px 50px;
  overflow-x: hidden;
  overflow-y: auto;
}

.list-content .title {
  margin: 24px 0;
  font-weight: 600
}

.list-content .common-list {
  display: flex;
  flex-wrap: wrap;
}

.list-content .common-list li {
  position: relative;
  width: 16%;
  display: flex;
  align-items: center;
  margin-left: 40px;
  margin-bottom: 40px;
  cursor: pointer;
}

/* @media screen and (max-width: 1440px) {
  .list-content .common-list li {
    width: 16%;
  }
} */

.list-content .common-list li:first-child {
  margin-left: 0;
}

.list-content .common-list li:nth-child(5n+1) {
  margin-left: 0;
}

/* @media screen and (max-width: 1440px) {
  .list-content .common-list li:nth-child(4n+1) {
    margin-left: 0;
  }
} */

.list-content .common-list li::after {
  position: absolute;
  content: '';
  top: 22%;
  right: 0;
  width: 1px;
  height: 50%;
  background-color: #DEDEDE;
}

.list-content .common-list li:nth-child(5n)::after {
  display: none;
}

/* @media screen and (max-width: 1440px) {
  .list-content .common-list li:nth-child(4n)::after {
    display: none;
  }
} */

.list-content .common-list li img {
  width: 65px;
  height: 65px;
  border-radius: 15px;
  transition: .4s;
}
.list-content .common-list li:hover img{
  box-shadow: 0px 2px 6px 1px #dedede;
  transition: .4s;
}

.list-content .common-list .text-content {
  margin-left: 22px;
  padding-right: 22px;
  overflow: hidden;
}

.list-content .common-list .text-content .process-name {
  font-weight: 600;
  margin-bottom: 12px;
}

.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
